<template>
  <div class="patient">
    <van-nav-bar
      left-text="患者信息"
      left-arrow
      @click-left="onClickLeft"
      fixed
    />
    <div class="base_info">
      <div class="avatar"></div>
      <div class="info">
        <div class="name_sex"><span>{{userinfo.name}}</span><van-icon name="chat-o" /></div>
        <div class="info_tags">
          <span>{{userinfo.illness}}</span>
          <span class="f_line"></span>
          <span>{{userinfo.sex}}</span>
          <span class="f_line"></span>
          <span>{{userinfo.age}}岁</span>
          <span class="f_line"></span>
          <span>{{userinfo.address}}</span>
        </div>
      </div>
    </div>
    <van-cell value="患者标签" class="patient_tag" />
    <div class="tags_box" @click="tags_popup = true">
    <!-- <van-cell :value="userinfo.tags[0] ? userinfo.tags[0]:'未设置'" />
    <van-cell :value="userinfo.tags[1] ? userinfo.tags[1]:'未设置'" />
    <van-cell :value="userinfo.tags[2] ? userinfo.tags[2]:'未设置'" /> -->
    <van-cell v-for="(item,index) in userinfo.tags" :key="index" >
      <template #title>
            <span class="custom-title">{{item ? item:'未设置'}}</span>
      </template>
    </van-cell>
    </div>
    <div class="phone">
      <span>联系方式</span>
      <span>{{userinfo.phone}}</span>
      <span>的</span>
    </div>
    <van-cell title="分组设置" is-link value="xx组" class="groupSet" @click="popup2 = true" />
    <!-- <van-cell value="分组设置" class="patient_tag" /> -->

    <van-cell
      class="teamSet"
      center
      title="群聊设置"
      @click="setGroup"
      is-link
      label="将患者拉入群聊"
    />
    <van-cell title="设为志愿者">
      <template #right-icon>
        <van-switch
          v-model="userinfo.volunteer"
          size="18px"
          active-color="#30be9e"
          inactive-color="#dcdee0"
        />
      </template>
    </van-cell>

    <van-cell title="从患者列表中移除" @click="removePatient" class="romove" />
    <!-- 遮罩层 -->
    <van-overlay :show="ddd" @click="closeMask" lock-scroll />

    <van-button class="startChat" type="primary">立即沟通</van-button>
    <!-- 移除对话框 -->
    <div v-if="Dshow" class="removeDialog">
      <div class="Dtitle">
        <img src="" alt="" />
        <h2>信息丢失警告</h2>
      </div>
      <div class="text">
        移除后,您可从粉丝列表中再次将其设置为患者,但分组、标签等数据将需要从新设置,是否确认移除?
      </div>
      <div class="btn">
        <van-button type="default" class="cancle" @click="cancle"
          >取消</van-button
        >
        <van-button type="default" :disabled="disBtn"
          >移除({{ tm }})</van-button
        >
      </div>
    </div>

    <!-- 群聊设置 弹出层  -->
    <van-popup v-model="popup" position="bottom" :style="{ height: '80%' }">
      <van-cell title="选择患者要加入的群聊" is-link arrow-direction="down" @click="popup =false" />
    <!-- 每个人 -->
      <van-cell class="group_patient">
        <template #title>
          <div class="group_avarat">sds</div>
          <span class="custom-title">单元格</span>
        </template>
        <template #right-icon>
           <van-icon v-if="addShow" name="add" class="add-icon" color="#296afc" @click="addShow =false" >加入</van-icon>
          <span v-if="!addShow" @click="addShow = !addShow">取消加入</span>
        </template>
      </van-cell>
    </van-popup>

    <!-- 分组设置 弹出层 -->
    <van-popup v-model="popup2" position="bottom" :style="{ height: '80%' }">
      <van-cell title="请选择要加入的分组" class="group_set">
        <template #right-icon>
          <span @click="goSetGroup()">去管理</span><van-icon name="arrow-down" style="16px" @click="popup2 =false" />
        </template>
      </van-cell>
    <!-- 每个组 -->
      <van-cell class="group_patient">
        <template #title>
          <span class="custom-title">德玛西亚</span>
        </template>
        <template #right-icon>
           <van-icon name="success" class="add-icon"></van-icon>
        </template>
      </van-cell>
    </van-popup>

    
    <!-- 患者标签 弹出层 -->
    <van-popup v-model="tags_popup" position="bottom" :style="{ height: '80%' }">
      <van-cell title="请选择一个标签" is-link arrow-direction="down" value="去管理" @click="tags_popup =false" />
      <van-cell class="patient_tags" v-for="(item,index) in tagsSet" :key="index">
        <template #title>
          <span class="custom-title">{{item}}</span>
        </template>
        <template #right-icon>
           <van-icon name="success" class="add-icon"></van-icon>
        </template>
      </van-cell>
      <div class="addTags" v-show="add_Tag" @click="addTag()"><van-icon name="plus" /><span>新增标签</span></div>
      <div v-if="inpShow"><van-field ref="addtag" v-model="value" placeholder="请输入标签名" maxlength="6" @blur="setTag()" /></div>
    </van-popup>
  </div>
</template>

<script>
import {getUserinfo} from '../../api/demo'
export default {
  components: {},
  data() {
    return {
      checked: false,  //设为志愿者
      Dshow: false, //删除对话框
      ddd: false,   //遮罩层
      tm: 5,  //倒计时
      disBtn: true,  //禁用按钮
      timer: null,  //定时器
      popup: false,//选择群聊弹窗
      popup2: false, //选择分组弹窗
      tags_popup:false, //患者标签弹窗
      add_Tag:true ,//新增标签
      inpShow:false, //标签输入框显示
      value:'' ,//标签输入框
      addShow:true,
      data:{id:null},
      userinfo:{},
      tagsSet:[]
};
  },
  computed: {},
  watch: {
    '$route' : {
      // 此处写router变化时，想要初始化或者是执行的方法......
      handler(){
         this.popup2 = false
      }
 
    }

  },
  methods: {
    //返回
    onClickLeft() {
      this.$router.go(-1);
      // 他呆呆的看着被他定在墙上的那半块桌布，就那么呆呆的看着，
      // 就像当年奥雷里亚诺布恩迪亚上校为了自由派东征时，看着地图而茫然不知所措的样子一模一样
      // 他也慢慢在不知所措中进入了梦乡
    },
    //  移除患者
    removePatient() {
      clearInterval(this.timer);
      this.ddd = true;
      this.Dshow = true;
      console.log(this.tm);
      var that = this;
      that.timer = setInterval(function () {
        that.tm = that.tm - 1;
        if (that.tm == 0) {
          clearInterval(that.timer);
          that.disBtn = false;
        }
      }, 1000);
    },
    closeMask() {
      this.disBtn = true; 
      this.ddd = false; 
      this.Dshow = false;
      this.tm = 5;
      clearInterval(this.timer);
    },
    //取消
    cancle() {
      this.closeMask();
    },
    //设置群聊
    setGroup() {
      this.popup = true;
    },
    //新增标签
    addTag(){
        this.add_Tag = false
        this.inpShow = true
        this.$nextTick(function(){ 
           this.$refs.addtag.focus()
        })

    },
    //去管理分组
    goSetGroup(){
        // this.popup2 = false
        this.$router.push('/groupManager')
        // this.popup2 = false
    }  ,
    //获取数据
   async getList(){
    this.data.id = parseInt(this.$route.params.id)
    // console.log(this.data);
     const res = await getUserinfo(this.data)
    //  console.log(res);
     res.forEach((val,index) => {
       console.log(index + 1);
        if(this.data.id == (index + 1)){
          this.userinfo = val           
        }
     });
     this.userinfo.tags.forEach((val,index)=>{
       if(val !== null) return this.tagsSet.push(val)
     })
     console.log(this.userinfo);
     console.log(typeof this.userinfo.tags[0]);
    },
    //设置分组
    setTag(){
        //  console.log('22'); 
       this.tagsSet.push(this.value)
       this.value = ''
       this.inpShow = !this.inpShow
       this.add_Tag = !this.add_Tag


    }
    
    },
  created() {
      this.getList()
  },
  mounted() {},
};
</script>
<style lang='less' scoped>
html,
body {
  height: 100vh;
  .patient {
    height: 100vh;
    background-color: #f5f6f7;
  }
}

/deep/ .van-nav-bar__content {
  margin-top: 0.666667rem /* 25/37.5 */;
}

/deep/ .van-nav-bar__text {
  color: #000 !important;
  font-size: 0.426667rem /* 16/37.5 */;
}
/deep/ .van-nav-bar .van-icon {
  color: #000 !important;
}
/deep/ .van-nav-bar__right {
  background-color: #2b70fd;
  border-radius: 0.533333rem /* 20/37.5 */;
  height: 0.906667rem /* 34/37.5 */;
  border: 1px solid #fff;
  box-shadow: gray 0.1 0.1 0.1;
  margin-right: 0.266667rem /* 10/37.5 */;
  margin-top: 0.133333rem /* 5/37.5 */;
  .van-nav-bar__text {
    font-size: 12px !important;
    color: #fff !important;
  }
}
.base_info {
  height: 2.133333rem /* 80/37.5 */;
  width: 100%;
  background-color: white;
  margin-top: 1.813333rem /* 68/37.5 */;
  display: flex;
  align-items: center;
  .avatar {
    height: 1.333333rem /* 50/37.5 */;
    width: 1.333333rem /* 50/37.5 */;
    background-color: #fdc228;
    border-radius: 0.666667rem /* 25/37.5 */;
    margin-left: 0.4rem /* 15/37.5 */;
  }
  .info {
    text-align: left;
    margin-left: 0.266667rem /* 10/37.5 */;
    .name_sex {
      font-size: 0.426667rem /* 16/37.5 */;
      font-weight: 700;
      span:first-child {
        margin-right: 0.266667rem /* 10/37.5 */;
      }
    }

    .info_tags {
      height: 0.533333rem /* 20/37.5 */;
      display: flex;
      align-items: center;
      .f_line {
        // background-color: turquoise;
        margin: auto 0.266667rem /* 10/37.5 */;
        //  margin-top: .133333rem /* 5/37.5 */;
        display: inline-block;
        height: 0.32rem /* 12/37.5 */;
        width: 0.026667rem /* 1/37.5 */;
        background-color: rgb(221, 221, 221);
      }
    }
  }
}

.patient_tag {
  font-size: 0.426667rem /* 16/37.5 */;
  // font-weight: 700;
  margin-top: 0.266667rem /* 10/37.5 */;
}
.phone {
  position: relative;
  width: 100%;
  height: 1.173333rem /* 44/37.5 */;
  background-color: white;
  margin-top: 0.266667rem /* 10/37.5 */;
  // display: flex;
  font-size: 0.426667rem /* 16/37.5 */;
  // align-items: center;
  // justify-content: space-between;
  span:first-child {
    position: absolute;
    left: 0;
    margin-left: 0.426667rem /* 16/37.5 */;
    display: inline-block;
    height: 1.173333rem /* 44/37.5 */;
    line-height: 1.173333rem /* 44/37.5 */;
  }
  span:nth-child(2) {
    position: absolute;
    left: 30%;
    display: inline-block;
    height: 1.173333rem /* 44/37.5 */;
    line-height: 1.173333rem /* 44/37.5 */;
  }

  span:last-child {
    position: absolute;
    right: 0;
    margin-right: 0.4rem /* 15/37.5 */;
    height: 1.173333rem /* 44/37.5 */;
    line-height: 1.173333rem /* 44/37.5 */;
  }
}
/deep/ .van-cell__title {
  text-align: left;
}
.groupSet {
  margin-top: 0.266667rem /* 10/37.5 */;
}
.teamSet {
  margin-top: 0.266667rem /* 10/37.5 */;
}
.romove {
  margin-top: 0.266667rem /* 10/37.5 */;
  .van-cell__title {
    text-align: center;
    color: red;
  }
}
.startChat {
  border: none;
  border-radius: 0.4rem /* 15/37.5 */;
  margin-top: 0.533333rem /* 20/37.5 */;
  background-color: #296afc;
  width: 86%;
}

.removeDialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  // transform: translateY(-50%) !important;
  border-radius: 0.133333rem /* 5/37.5 */;
  height: 8rem /* 300/37.5 */;
  width: 8.8rem /* 330/37.5 */;
  background-color: white;
  z-index: 999;
  .Dtitle {
    height: 3.2rem /* 120/37.5 */;
  }
  .text {
    font-size: 0.426667rem /* 16/37.5 */;
    padding: 0.5rem /* 15/37.5 */;
    color: rgb(87, 87, 87);
  }
  .btn {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    .cancle {
      color: rgb(139, 139, 139);
      border-right: none;
    }
    .van-button--normal {
      border-radius: 0;
      width: 50%;
      height: 1.6rem /* 60/37.5 */;
      font-size: 0.426667rem /* 16/37.5 */;
      font-weight: 700;
    }
  }
}
.group_avarat {
  display: inline-block;
}
.group_patient {
  display: flex;
  align-items: center;
}
.add-icon::before {
  margin-right: .133333rem /* 5/37.5 */;
}
.addTags {
  height: 1.066667rem /* 40/37.5 */;
  line-height: 1.066667rem /* 40/37.5 */;
  font-size: .373333rem /* 14/37.5 */;
  font-weight: 700;
  text-align: left;
  margin-left: .266667rem /* 10/37.5 */;
}

//分组设置 
.group_set {
  display: flex;
  align-items: center;
  .van-icon-arrow-down {
    margin-left: .266667rem /* 10/37.5 */;
  }
}

</style>